<style scoped>
.boundprovince {
  position: fixed;
  height: 2rem;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #c8d0da;
  padding-bottom: .04rem;
}
.close-box {
  height: .35rem;
  position: absolute;
  left: 0;
  right: 0;
  top: -.35rem;
  border-top: 1px solid #eee;
  background-color: #fff;
}
.close-btn {
  display: block;
  height: .35rem;
  width: .35rem;
  text-align: center;
  line-height: .35rem;
  position: absolute;
  right: .16rem;
  top: 0;
  color: #26a2ff;
}
.keyboard a{
  text-decoration: none;
  width: 0.325rem;
  height: 0.425rem;
  display: inline-block;
  font-size: 0.16rem;
  text-align: center;
  line-height: 0.425rem;
  background-color: #fff;
  margin: 0.04rem 0.025rem;
  border-radius: 0.04rem;
  -webkit-box-shadow: 0 0.01rem 0rem #888992;
  box-shadow: 0 0.01rem 0rem #888992;
  font-weight: 500;
  color: #222;
}
.keyboard .item {
  text-align: center;
}
.keyboard .four {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.delete-box {
  display: inline-block;
  margin: 0.04rem 0.025rem;
  height: 0.425rem;
  background-color: #a8afbf;
  margin-left: .4rem;
  border-radius: 4px;
  width: calc((100%/10 - 3%)*2);
}
.delete {
    background: url() no-repeat 90%;
    height: 100%;
    background-position: center;
    background-size: 100%;
}
</style>
<template>
  <div class="boundprovince" v-show="show">
    <div class="close-box">
      <span class="close-btn" @click="closeFunc">关闭</span>
    </div>
    <div ref="keyBoardProvince" class="keyboard keyboard-province">
      <div class="item" style="margin-top: 0.02rem;">
        <a>京</a>
        <a>津</a>
        <a>沪</a>
        <a>渝</a>
        <a>冀</a>
        <a>豫</a>
        <a>云</a>
        <a>辽</a>
        <a>黑</a>
        <a>湘</a>
      </div>
      <div class="item">
        <a>皖</a>
        <a>鲁</a>
        <a>新</a>
        <a>苏</a>
        <a>浙</a>
        <a>赣</a>
        <a>鄂</a>
        <a>桂</a>
        <a>甘</a>
      </div>
      <div class="item">
        <a>晋</a>
        <a>蒙</a>
        <a>陕</a>
        <a>吉</a>
        <a>闽</a>
        <a>贵</a>
        <a>粤</a>
        <a>青</a>
      </div>
      <div class="item four">
        <a>藏</a>
        <a>川</a>
        <a>宁</a>
        <a>琼</a>
        <a>使</a>
        <div class="delete-box" @click="deleteFunc">
          <div class="delete"></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'BoundProvince',
  components: {

  },
  data () {
    return {
      show: true,
      provinceKey: []
    }
  },
  computed: {
    ...mapState(['province'])
  },
  methods: {
    /*
    * 初始化a标签点击事件
    */
    initAevent () {
      let vm = this
      let _province = this.provinceKey
      for (let i = 0; i < _province.length; i++) {
        _province[i].index = i
        _province[i].addEventListener(
          'touchstart',
          function (e) {
            this.style.backgroundColor = '#898eab'
          }
        )
        _province[i].addEventListener(
          'touchend',
          function (e) {
            vm.$emit('input-cardid', this.innerText)
            this.style.backgroundColor = '#fff'
          }
        )
      }
    },
    // 关闭省份选择面板
    closeFunc () {
      this.provinceFunc(false)
    },
    // 删除省份
    deleteFunc () {
      this.$emit('input-cardid', '')
    },
    ...mapMutations(['provinceFunc'])
  },
  watch: {
    province (bool) {
      this.show = bool
    }
  },
  mounted () {
    this.provinceKey = this.$refs.keyBoardProvince.querySelectorAll('a')
    this.initAevent()
  }
}
</script>
